<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>当前的n值是：<span v-text="n"></span></h1>
      
        <h1>放大后的n值是：<span v-big="n"></span></h1> 
        <input v-fbind="n">
    </div>
   <script type="text/javascript">


    // 全局写法 自定义指令（指令名,配置对象）
    // Vue.directive('fbind',{})

    new Vue({
        el:'#root',
        data: {
            n:1
        },
        directives: {
            // 自定义标签 该方式相当于定义了 bind 和update
            big(element, binding) {
                // this是window
                element.innerText = binding.value * 10
            },
            fbind:{
                // 指令与元素成功绑定时调用
                bind(element, binding) {
                     // this是window
                    console.log("bind");
                },
                // 指令所在元素被插入页面时调用
                inserted(element, binding) {
                     // this是window
                    console.log("inserted");

                },
                // 指令所在模板结构被重新解析时调用
                update(element, binding) {
                     // this是window
                    console.log("update");
                },

            },
            fbind(element, binding) {
              element.value = binding.value

            }
        }
    })
   </script>
</body>
</html>